<div class="user-address-book-wrapper">

  <div class="org-select-wrapper">
    <div class="org-tree-label">机构选择</div>

    <div class="org-tree-wrapper">
      <app-org-tree-selector (checkOrg)="getUsersUnderOrg($event)"></app-org-tree-selector>
    </div>

    <div class="user-search-wrapper">
      <nz-input-group [nzSuffix]="suffixTemplate"
                      [nzPrefix]="prefixTemplate">
        <input [(ngModel)]="keyWord" type="text" nz-input placeholder="员工编号/姓名">
      </nz-input-group>
      <ng-template #suffixTemplate>
        <em nz-icon nzType="search" nzTheme="outline" (click)="searchUser()" class="pointer"></em>
      </ng-template>
      <ng-template #prefixTemplate>
        <em nz-icon nzType="user" nzTheme="outline"></em>
      </ng-template>
    </div>
  </div>

  <div class="user-wrapper">
    <div class="user-scope-label">用户列表</div>
    <div class="user-list-wrapper">
      <div class="user-item" *ngFor="let user of scopeUsers"
           (click)="selectUser(user)" [class.active]="isSelected(user)">
        <div class="user-item-row">{{user.name}}/{{user.userId}}</div>
        <div class="user-item-row">{{user.position}}</div>
        <em nz-icon nzType="check" nzTheme="outline"></em>
      </div>
    </div>

    <div class="add-all-wrapper" (click)="addAll()">
      <em nz-icon nzType="usergroup-add" nzTheme="outline"></em>全部添加
    </div>
  </div>
</div>

<div class="selected-user-wrapper">
  <div class="selected-user-label">已选择人员：</div>
  <div class="selected-user-list">
    <nz-select [(ngModel)]="selectedUsers" nzMode="multiple"
               [nzDropdownStyle]="{display: 'none'}">
      <nz-option *ngFor="let option of selectedUsers"
                 [nzLabel]="option.name + '/' + option.userId"
                 [nzValue]="option">
      </nz-option>
    </nz-select>
  </div>
</div>

<div class="footer" *nzModalFooter>
  <button nz-button nzType="primary" (click)="submit()">提交</button>
  <button nz-button (click)="cancel()">取消</button>
</div>
